<style>
.error {
    /*0审核失败*/
    color: #ed3f14;
}

.NotFillIn {
    /*1未填报*/
    color: #ff9900;
}

.FillIn {
    /*2已填报*/
    color: #993300;
}

.AlreadyReport {
    /*3已上报*/
    color: #2d8cf0;
}

.success {
    /*4审核通过*/
    color: #19be6b;
}

.lock {
    /*5锁定*/
    color: #80848f;
}
li{
        /*border-bottom: 1px solid #E3E8EE;*/
        line-height: 40px;
}
.home{
    padding: 8px;
    background: url("../assets/homebackimag.jpg");
}
</style>

<template>
    <div class="home" v-bind:style="{ height: clientHeight + 'px' }" >
        <Row class="row">
            <Col :lg="{span:7}" :md="{span:12}" :sm="{span:24}" :xs="{span:24}">
            <Card>
                <p slot="title" style="height:30px">
                    <Icon type="android-contact" size="28" color="#377ec4"></Icon>
                    <span style="font-size:24px;">欢迎您:{{UserModel.UserName}}</span>
                </p>
                <div style="height:450px;">
                    <ul>
                        <li>
                            <span>上次登录:</span>
                            <span>{{UserModel.LastLoginTime|moment}}</span>
                        </li>
                        <li>
                            <span>所在地区:</span>
                            <span>{{UserModel.AreaCode|omgAreaName}}</span>
                        </li>
                        <li>
                            <span>个人电话:</span>
                            <span>{{UserModel.Phone}}</span>
                        </li>
                        <li>
                            <span>工作电话:</span>
                            <span>{{UserModel.TelPhone}}</span>
                        </li>
                        <li>
                            <span>电子邮件:</span>
                            <span>{{UserModel.Email}}</span>
                        </li>
                        <li>
                            <span>现任职务:</span>
                            <span>{{UserModel.PostName}}</span>
                        </li>
                        <li>
                            <span>工作单位:</span>
                            <span>{{UserModel.UnitName}}</span>
                        </li>
                        <li>
                            <span>单位地址:</span>
                            <span>{{UserModel.UnitAddress}}</span>
                        </li>
                        <li>
                            <span>特别提醒:</span>
                            <span>
                                <span style="color:red;">***请核对个人信息，如需修改，请点击右上角进行修改***</span>
                            </span>
                        </li>
                    </ul>
                </div>
            </Card>
            </Col>
            <Col :lg="{span:16,offset:1}" :md="{span:12}" :sm="{span:24}" :xs="{span:24}" class="Col">
            <Card>
                <p slot="title" style="height:30px">
                    <Icon type="clipboard" size=28 color="#377ec4"></Icon>&nbsp;&nbsp;&nbsp;&nbsp;
                    <label style="font-size:24px">进度概览</label>
                </p>
                <Table ref="table" :stripe=true :border=true :columns="TableHeader" :data="datas" size="large" height="450">
                </Table>
            </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userInfo: this.GetlocaStorage("fruuserinfo"),
            UserModel: {},
            datas: [],
            clientHeight: window.innerHeight - 137,//表格默认高度
            TableHeader: [
                { title: '报表名称', key: 'ReportName', ellipsis: true },
                { title: '审核失败', key: 'ReviewFalse', width: 100, className: 'error' },
                { title: '未填报', key: 'NotFillIn', width: 101, className: 'NotFillIn' },
                { title: '未上报', key: 'FillIn', width: 101, className: 'FillIn' },
                { title: '已上报', key: 'AlredayReport', width: 101, className: 'AlreadyReport' },
                { title: '审核通过', key: 'ReviewSuccess', width: 100, className: 'success' }
            ],
        }
    },
    mounted() {
        //table高度计算方法
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight - 137;
            })()
        };
    },
    methods: {
        initUser() {
            var self = this;
            this.$http.get("User", { params: { id: this.userInfo.UserId } }).then(
                function (res) {
                    if (res.data.status == 1) {
                        self.UserModel = res.data.model;
                    }
                    else {
                        self.$Modal.error({ title: "提示信息", content: "系统异常，请与管理员联系!!!" });
                    }
                });
        },
        initReportReview() {
            var self = this;
            self.$http.get('Report/GetReportReview?AreaCode=' + this.userInfo.AreaCode).then(function (res) {
                if (res.data.status === 1) {
                    self.datas = res.data.model;
                }
                else {
                    self.$Modal.error({
                        title: '提示信息',
                        content: res.data.message
                    });
                }
            });
        }
    },
    //创建Vue页面方法
    created: function () {
        this.initUser();
        this.initReportReview();
    },
}
</script>